<template>
  <div class="w-full h-80">
    <div class="w-full h-full mb-5" ref="ljsyl" />
    <div class="mt-5">
      <span>时间选择: </span>
      <el-check-tag
        class="mr-2"
        v-for="(label, t) in Types2"
        :key="t"
        :checked="type_ === t"
        @click="type_ = t"
        >{{ label }}</el-check-tag
      >
    </div>
  </div>
</template>

<script lang="ts">
import {
  ref,
  onMounted,
  defineComponent,
  computed,
  watch,
  shallowRef,
} from "vue";
import { echarts, ECOption } from "/@/components/Echart";
import { fundLjsyl, FundLjsylRes, Types2 } from "/@/api/fund";
import { LineSeriesOption } from "echarts/charts";
import { ECharts } from "echarts/core";

export default defineComponent({
  props: {
    funds: { type: Array, required: true },
  },
  setup(props) {
    const myChart = shallowRef<ECharts | null>(null);
    const type_ = ref("month");
    const data = ref<FundLjsylRes>();
    const getData = async () => {
      if (props.funds.length) {
        let {
          data: { Data },
        } = await fundLjsyl(
          props.funds.join(","),
          type_.value as keyof typeof Types2
        );
        data.value = Data;
      }
    };
    getData();
    const legend = computed(() => {
      return data.value?.graph.map((v) => {
        return v.name;
      });
    });
    const xAxis = computed(() => {
      return data.value?.dataProvider.map((v) => {
        return v.date;
      });
    });
    const series = computed(() => {
      const m = Object.fromEntries(
        data.value?.graph.map((v) => {
          return [v.valueField, v.name];
        }) || []
      );
      const res = [];
      for (let k in m) {
        res.push({
          name: m[k],
          type: "line",
          stack: "Total",
          data: data.value?.dataProvider.map((v) => {
            return v[k];
          }),
        });
      }
      return res;
    });
    const option = computed((): ECOption => {
      return {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: legend.value,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxis.value,
        },
        yAxis: {
          type: "value",
        },
        series: series.value as LineSeriesOption,
      };
    });
    const ljsyl = ref(null);

    onMounted(() => {
      myChart.value = echarts.init(ljsyl.value as unknown as HTMLElement);
      window.onresize = () => {
        myChart.value?.resize();
      };
    });
    watch(data, (v) => {
      if (v) {
        myChart.value?.setOption(option.value);
        myChart.value?.resize();
      }
    });
    watch(type_, () => {
      getData();
    });
    watch(props.funds, () => {
      getData();
    });

    return {
      ljsyl,
      legend,
      xAxis,
      series,
      type_,
      data,
      getData,
      option,
      Types2,
    };
  },
});
</script>